<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>李土鸡后台管理系统</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 导入公共页面 -->
        {{ include "./common/header.html" }}

        <!-- 导入公共页面 -->
        {{ include "./common/side.html" }}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <h1 style="margin: 10px 60px;">添加文章</h1>
                <form class="layui-form" id="artForm" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-inline">
                            <input type="file" name="pic" id="pic" onchange="uploadFile(this)" style="display:none">
                            <a class="layui-btn" href="javascript:;" id="upload">上传文件</a>
                            <img src="" id="preview" alt="" style="width:80px">
                        </div>
                    </div>

                    <div style="position: relative; padding: 10px 0;">
                        <div class="layui-form-item" style="position: absolute; top:0;left:0; z-index: 999999;margin: 18px 0;
                        top: -31px;">
                            <label class="layui-form-label">所属分类</label>
                            <div class="layui-input-inline">
                                <select id="cate_id" name="cate_id">
                                    <option value="0">未分类</option>
                                </select>
                            </div>
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">审核</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="0" title="待审核" checked="">
                            <input type="radio" name="status" value="1" title="审核通过">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-block">
                            <div id="content"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="submitForm">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</body>

<script src="/assets/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script>
    const reg = /\?id=(\d+)/
    const [, id] = location.search.match(reg)
    let isUpdPic = 0; // 不更新 =1就更新
    let editor;
    let oldPic;
    function eidtor() {
        // 初始化富文本编辑器
        const edit = window.wangEditor
        eidtor = new edit('#content')
        // 1上传文件会变成base64
        editor.config.uploadImgShowBase64 = true
        eidtor.config.uploadImgMaxSize = 0.5 * 1024 * 1024
        eidtor.create()
    }
    eidtor();

    // 预览图片
    function uploadFile(fileEle) {
        const file = fileEle.files[0];
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileEle.onload = function () {
            const base64 = this.result
            $('#preview').attr('src', base64)
            isUpdPic = 1
        }
    }

    layui.use(['from', 'layedit', 'laydate'], async function () {
        const form = layui.form;
        async function initCateData() {
            const { data } = await $.get('/cateData')
            let optionsHtml = '<option value="0">未分类</option>'
            data.forEach(item => {
                const { cate_id, cate_name } = item;
                optionsHtml += `<option value="${cate_id}">${cate_name}</option>`
            });
            $("#cate_id").html(optionsHtml)
            form.render('select')
        }
        initCateData();

        // 上传文件
        $("#upload").on('click', () => {
            $('#pic')[0].click();
        })

        let result = await $.get('/fetchOneArt', { id })
        let { status, title, content, author, pic, cate_id } = result
        oldPic = pic
        status = status == 1 ? true : false
        form.val('example', {
            title, status, cate_id
        });
        $("#preview").attr('src', pic)
        editor.txt.html(result.content)
    })

    // 提交表单数据
    $("#submitForm").on('click', async () => {
        const formData = new FormData($("#artForm")[0])
        const content = editor.txt.html()
        formData.set('content', content)
        formData.set('id', id)
        formData.set('isUpdPic', isUpdPic)
        formData.set('oldPic', oldPic)
        const { code, message } = await $.ajax({
            url: "updArtData",
            type: "post",
            data: formData,
            contentType: false,
            processData: false
        })
        layer.msg(message)
        if (code === 0) {
            location.href = '/artlist'
        }
    })

</script>


</html>